<template>
  <view>
    <view class="tabBar_top"></view>
    <view class="tabBar">
      <view
        v-for="(item, index) in tabBar"
        :key="item.url"
        class="tabbar_item"
        :class="{ active: item.url == currentPage }"
        @click="navTo(item)"
      >
        <image
          v-if="item.url == currentPage"
          :src="item.imgClick"
          mode=""
        ></image>
        <image v-else :src="item.imgNormal" mode=""></image>
        <view class="text">{{ item.text }}</view>
	      <view class="active_bg" v-if="item.url == currentPage"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: String,
      default: "index",
    },
  },
  data() {
    return {
      tabBar: [
        {
          url: "/pages/index/index",
          text: "首页",
          imgNormal: "/static/images/tabbar/home.png",
          imgClick: "/static/images/tabbar/home-active.png",
        },
        {
          url: "/pages/invest/orders",
          text: "订单中心",
          imgNormal: "/static/images/tabbar/order.png",
          imgClick: "/static/images/tabbar/order-active.png",
        },
        // {
        // 	url:'/pages/invest/hot',
        // 	text:'热点',
        // 	imgNormal:'/static/images/tabbar/icon_task.png',
        // 	imgClick:'/static/images/tabbar/icon_task_on.png'
        // },
        {
          url: "/pages/chat/chat",
          text: "AI对话",
          imgNormal: "/static/images/tabbar/ai.png",
          imgClick: "/static/images/tabbar/ai-active.png",
        },
        // {
        // 	url:'/pages/team/index',
        // 	text:'团队',
        // 	imgNormal:'/static/images/tabbar/team.png',
        // 	imgClick:'/static/images/tabbar/team_on.png'
        // },
        {
          url: "/pages/user/person",
          text: "个人中心",
          imgNormal: "/static/images/tabbar/my.png",
          imgClick: "/static/images/tabbar/my-active.png",
        },
      ],
    };
  },
  created() {
    uni.hideTabBar({});
  },
  computed: {},
  methods: {
    navTo(item) {
      if (item.url !== this.currentPage) {
        var isUrl = `${item.url}`;
        const that = this;
        if (isUrl == "/pages/index/index") {
          uni.switchTab({
            url: isUrl,
          });
        } else if (
          isUrl == "/pages/user/person"   ||
          isUrl == "/pages/invest/orders" ||
          isUrl == "/pages/chat/chat"
        ) {

          uni.switchTab({
            url: isUrl,
            success: function (e) {
              var page = getCurrentPages().pop();
              //console.log('page',page)
              // if (page == undefined || page == null) return;
              // page.onLoad();
              setTimeout(() => {
                // 	var currPage = page.pop(); //当前页面
                // 	console.log(currPage.$vm)
				const userInfo = localStorage.getItem('userinfo')
                if (!userInfo || userInfo == undefined || userInfo == null) {
                  console.log("进入首页未登录跳转到login页1");
                  uni.reLaunch({
                    url: "../login/login",
                  });
                } else {
                  //page.onLoad();
                }
              }, 300);
            },
          });
        } else if (isUrl == "/pages/chat/index") {
          console.log("chat/index");
          uni.switchTab({
            url: isUrl,
          });
          // uni.removeStorage('userinfo')
        } else {
          //						console.log('ISURL',isUrl)
          uni.switchTab({
            url: isUrl,
            success: function (e) {
              var page = getCurrentPages().pop();
              //							  console.log('page',page)
              // if (page == undefined || page == null) return;
              // page.onLoad();
              setTimeout(() => {
                // 	var currPage = page.pop(); //当前页面
                // 	console.log(currPage.$vm)
                // if(!page || page == undefined || page == null){
                // 	console.log('进入首页未登录跳转到login页2')
                // 	uni.reLaunch({
                // 		url: "../login/login"
                // 	})
                // }else{
                // 	//page.onLoad();
                // }
              }, 300);
            },
          });
        }
      } else {
        // this.$parent.toTop()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//导航栏设置
$isRadius: 0upx; //左上右上圆角
$isWidth: 100vw; //导航栏宽度
$isBorder: 0px solid white; //边框 不需要则设为0px
$isBg: #0d1a44; //背景

// 选中设置
$chooseTextColor: #7ae6ff; //选中时字体颜色
$chooseBgColor: transparent; //选中时背景颜色 transparent为透明

//未选中设置
$normalTextColor: #fff; //未选中颜色
.tabBar_top {
	background: url("/static/images/tabbar/tb-bg.png");
	background-size: 100% 100%;
  height: 140upx;
	position: fixed;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 0;
	/* #endif */
	left: 0;
	right: 0;
	z-index: 998;
	
}
.tabBar {
  width: $isWidth;
  height: 120upx;
  position: fixed;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 0;
  /* #endif */
  left: 0;
  right: 0;
  //box-shadow: 0upx -2upx 10upx rgba(89, 125, 172, 0.4);
  margin: 0 auto;
  z-index: 998;
  //background-color: $isBg;
  color: $normalTextColor;
  border-left: $isBorder;
  border-top: $isBorder;
  border-right: $isBorder;
  display: flex;
  justify-content: space-around;
	align-items: end;
  border-top-right-radius: $isRadius;
  border-top-left-radius: $isRadius;
  box-sizing: border-box;
  overflow: hidden;
  .tabbar_item {
	  height: 100%;
    width: 25%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
	  position: relative;
	  justify-content: end;
	  padding-bottom: 5rpx;
    &.active {
      border-left: $isBorder;
      border-top: $isBorder;
      background: $chooseBgColor;
    }
  }
	.text {
		position: relative;
		z-index: 2;
	}
  image {
    width: 48upx;
    height: 48upx;
    margin-left: 5upx;
	  margin-bottom: 8rpx;
	  position: relative;
	  z-index: 2;
	  
  }
}
.active_bg {
	position: absolute;
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	top: 10rpx;
	z-index: 1;
	background: url("/static/images/tabbar/active-bg.png");
	background-size: 100% 100%;
	//transform: translateY(50%);
}
</style>
